<template>
	<view class="wanl-order-list wanl-goods-comment">
		<view class="collect-container__head bg-white" :style="{ height: headHeight + 'px' }">
			<view :style="{ height: headHeight + 'px'}">
				<view class="navigater flex align-center justify-between">
					<scroll-view :scroll-left="scrollLeft" scroll-x="true" class="nav text-center">
						<view class="cu-item flex-sub" v-for="(item, index) in navList" :key="item.status"
							:class="{ 'text-green cur': tabCurrentIndex === index }" @tap="tabClick(index)">
							{{ item.text }}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		
		<wanl-scroll-list ref="list" :option="{page: 1,auto: true,safeArea: true}" @load="load($event,'load')" @refresh="load($event,'refresh')">
			<view class="list-scroll-content">
				<block v-for="(item,k) in orderList" :key="item.id">
					<homemaking v-if="navList[tabCurrentIndex].status == 1" :item="item"></homemaking>
					<medicalvisit v-if="navList[tabCurrentIndex].status == 2" :item="item"></medicalvisit>
					<accompany v-if="navList[tabCurrentIndex].status == 3" :item="item"></accompany>
					<circles v-if="navList[tabCurrentIndex].status == 6" :item="item"></circles>
					<nursing v-if="navList[tabCurrentIndex].status == 4" :item="item"></nursing>
					<goods v-if="navList[tabCurrentIndex].status == 7" :item="item"></goods>
					<internethospital v-if="navList[tabCurrentIndex].status == 13" :item="item"></internethospital>
				</block>
			</view>
		</wanl-scroll-list>
	</view>
</template>

<script>
	import homemaking from './components/homemaking'
	import accompany from './components/accompany'
	import circles from './components/circle'
	import medicalvisit from './components/medicalvisit'
	import nursing from './components/nursing'
	import goods from './components/goods'
	import internethospital from './components/internethospital'
	internethospital
	export default {
		components:{
			homemaking,accompany,circles,medicalvisit,nursing,goods,internethospital
		},
		data() {
			return {
				orderList:[],
				headHeight: 0,
				tabCurrentIndex: 0,//当前查看的评价分类索引
				navList: [
					{
						status: 1,
						text: '家政服务',
						url: '/pages/medicalcare/homemaking/product',
						http:'/addons/homeking/api.comment/comment'
					},
					{
						status: 2,
						text: '医护上门',
						url: '/pages/medicalcare/visit/product',
						http:'/addons/medicalvisit/api.comment/comment'
					},
					{
						status: 3,
						text: '陪诊陪护',
						url: '/pages/medicalcare/accompany/product',
						http:'/addons/accompany/api.comment/comment'
					},
					{
						status: 4,
						text: '医养院',
						url: '/pages/Medical/details',
						http:'/addons/nursing/api.comment/comment'
					},
					{
						status: 6,
						text: '圈子',
						http:'/addons/circle/api.comment/lists'
					},
					{
						status: 7,
						text: '商品',
						url: '/pages/product/goods',
						http:'/wanlshop/user/comment'
					},
					// {
					// 	status: 8,
					// 	text: '团购',
					// 	url: '/pages/apps/groups/goods',
					// 	http:'/wanlshop/user/comment'
					// },
					{
						status: 13,
						text: '在线问诊',
						url: '/pages/medicalcare/bookingsystem/doctor',
						http:'/addons/internethospital/api.comment/comment'
					}
				],//评价分类列表
				scrollLeft: 0
			};
		},
		onLoad(options) {
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = uni.upx2px(90);
			// this.loadData();
			if(options.type) {
				this.tabCurrentIndex = Number(options.type)
				this.scrollLeft = this.tabCurrentIndex * uni.upx2px(160)
			}
			// this.load({page:1},'load')
		},
		methods: {
			// 加载数据
			load(paging,key) {
				let navItem = this.navList[this.tabCurrentIndex];
				let status = navItem.status;
				uni.request({
					url: navItem.http,
					data: {
						type: status,
						page: paging.page,
						order_type: status == 7 ? 'goods' : 'groups'
					},
					success: res => {
						let orderList = res.data.data;
						if(key == 'load') {
							this.orderList = [...this.orderList, ...orderList];
							this.$refs.list.loadSuccess({ list: this.orderList, total: res.data.total });
						} else if(key == 'refresh') {
							this.orderList = orderList;
							this.$refs.list.refreshSuccess({ list: this.orderList, total: res.data.total });
						}
					}
				});
			},
			onGoods(id, url) {
				this.$wanlshop.to(`${url}?id=${id}`)
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.scrollLeft = index * uni.upx2px(160)
				this.$refs.list.refreshScrollView()
				this.load({page:1},'refresh')
			},
			//预览图片
			previewImage(image, index) {
				var imgArr = [];
				for (var item of image) {
					imgArr = imgArr.concat(this.$wanlshop.oss(item, 500));
				}
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index],
					indicator: 'number'
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	page {
		height: 100%;
		background-color: #ededed;
	}
	
	.collect-container {
		&__head {
			.navigater {
				position: relative;

				.back {
					position: absolute;
					left: 25rpx;
					z-index: 9999;

					text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}
		}
	}

	.nav .cu-item {
		width: 160rpx !important;
	}

	.nav .cu-item.cur {
		border: none;
		position: relative;

		&::after {
			position: absolute;
			content: "";
			display: inline-block;
			width: 34rpx;
			height: 4rpx;
			background: #4CBD66;
			bottom: 0;
			left: 50%;
			margin-left: -17rpx;
		}
	}

	.list {
		padding-bottom: 20rpx !important;

		.goods {
			border-radius: 6rpx;

			.content {
				view {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
				}

				text {
					display: inline-block;
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 400;
					color: #555555;
					line-height: 34rpx;
					margin-top: 4rpx;
				}
			}
		}
	}

	.details {
		view {
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}
</style>